<!-- 登录页面 -->
<template>
	<view>
		<view class="overall">
			<image src="../../static/login-icon/logo.png" class="login-icon"></image>
		</view>
		<view class="login">
			<form @submit="formsumit">
				<input type="text" placeholder="手机号码" class="input" name="phone">
				<input type="safe-password" placeholder="请输入密码" class="input" name="password">
				<button class="input button" form-type="submit">登录</button>
			</form>
			<view class="br">
				或
			</view>
			<button class="input register" @click="register">立即开户</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		// 监听返回按钮
		onBackPress() {
			this.back()
			return true
		},
		methods: {
			notification(title) {
				uni.showModal({
					title: title,
					showCancel: false
				});
			},
			formsumit(e) {
				let request = 'http://2ff9dd19.r5.cpolar.top';
				let reg = /^1[3-9]{1}[0-9]{9}$/;
				let phone = e.detail.value.phone;
				let password = e.detail.value.password;
				if (phone.length == 0) {
					this.notification('请您填写手机号码');
				} else if (phone.length !== 0 && reg.test(phone) !== true) {
					this.notification('请输入正确的手机号码');
				} else if (phone.length !== 0 && reg.test(phone) == true) {
					if (password.length == 0) {
						this.notification('请输入您的密码');
					}
				}
				if (phone.length !== 0 && reg.test(phone) == true && password.length !== 0) {
					//登录
					uni.request({
						url:request+'/api/user/login',
						method:'POST',
						data:{
							"account":phone,
							"password":password
						},
						success(res) {
							if(res.statusCode == 200){
								let token =res.data.data.userinfo.token;
								let id =res.data.data.userinfo.id;
								let name =res.data.data.userinfo.username;
								let phone =res.data.data.userinfo.mobile;
								uni.setStorageSync("token",token);
								uni.setStorageSync("id",id);
								uni.setStorageSync("name",name);
								uni.setStorageSync("phone",phone);
								if(uni.getStorageSync('token')){
									uni.switchTab({
										url:"/pages/mine/mine"
									})
								}
							}
						}
					})
				}
			},
			register() {
				uni.navigateTo({
					url: "/pages/register/register"
				});
			},
			back() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			}
		}
	}
</script>

<style lang="scss">
	.overall {
		width: 100%;
		height: 17.25rem;
		background: url("../../static/login-icon/login_bg.png") no-repeat;
		background-position-y: -2rem;
		background-size: 100%;
		display: flex;
		align-items: center;
		flex-direction: column-reverse;
		padding-top: 8.125rem;
		padding-bottom: 1.25rem;
		box-sizing: border-box;
	}

	.login-icon {
		width: 7.5rem;
		height: 7.5rem;
	}

	.login {
		width: 100%;
		height: 32.0399999993592rem;
		margin-top: 1.7999999964rem;
	}

	.input {
		width: 18.18rem;
		height: 3rem;
		border: 0.0599999988rem solid #f2f2f2;
		margin: 0rem auto;
		border-radius: 2rem;
		padding-left: 1.1999999999976rem;
		box-sizing: border-box;
		margin-bottom: 0.77999999844rem;
		color: #282828;
		font-size: 0.8125rem;
	}

	.button {
		background-color: #ff4c3e;
		color: #f2f2f2;
		font-size: 1.2rem;
		line-height: 3rem;
	}

	.register {
		background-color: transparent;
		border: 0.0599999988rem solid #ff4c3e;
		color: #ff4c3e;
		font-size: 1.2rem;
		line-height: 3rem;
	}

	.br {
		width: 100%;
		text-align: center;
		margin-bottom: 0.599998rem;
		color: #999999;
		font-size: 0.8125rem;
	}
</style>